<template>
  <div class="login">
    <!-- 导航栏 -->
    <van-nav-bar
      title="登录"/>
    <!-- /导航栏 -->
    <!-- 手机号验证码 -->
    <van-cell-group>
      <van-field
        v-model="user.mobile"
        label="手机号"
        placeholder="请输入手机号"
      />

      <van-field
        v-model="user.code"
        label="验证码"
        placeholder="请输入验证码"
      />
    </van-cell-group>
    <!-- /手机号验证码 -->
    <!-- 按钮登录 -->
    <div class="login-box">
      <van-button type="info" @click="onLogin">登录</van-button>
    </div>
    <!-- /按钮登录 -->
  </div>
</template>

<script>
import '@/styles/index.less'
import { login } from '@/api/user.js'

export default {
  name: 'loginPage',
  data () {
    return {
      user: {
        mobile: '13911111111',
        code: '246810'
      }
    }
  },
  methods: {
    async onLogin () {
      // 开启页面交互 后续有其他效果 无需关闭
      this.$toast.loading({
        duration: 0,
        message: '登录中...',
        forbidClick: true
      })
      try {
        const res = await login(this.user)
        // 把获取的token传递给状态管理store
        this.$store.commit('setUser', res.data.data)
        // 运行到这里 会先关闭之前的交互效果 执行下面的交互
        this.$toast.success('登录成功!')
        // 在token失效后 我们携带信息来到登录页 如果||前面this.$route.query.redirect为真
        // 则redirect = this.$route.query.redirect 如果为假则redirect = '/'
        // 那么重新登录后依然可回到之前的操作界面
        const redirect = this.$route.query.redirect || '/'
        this.$router.push(redirect)
      } catch (error) {
        // 运行到这里 会先关闭之前的交互效果 执行下面的交互
        this.$toast.fail('登录失败,手机号或验证码错误!')
      }
    }
  }
}
</script>

<style scoped lang="less">
  .login-box {
    padding: 10px;
    .van-button--normal {
      width: 100%;

    }
  }
</style>
